<template>
    <el-container class="admin-layout-container">
        <!--        左侧的导航-->
        <el-aside width="200px" class="main-nav-menu">
            <div class="site-logo">
                <img src="./../assets/logo.svg" alt="">
                <h1 class="text">人力资源管理系统</h1>
            </div>
            <el-menu :default-active="activeIndex" class="main-el-menu" :router="true">
                <el-menu-item index="/index">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">个人首页</span>
                </el-menu-item>
                <el-menu-item index="/chart">
                    <i class="el-icon-data-line"></i>
                    <span slot="title">统计首页</span>
                </el-menu-item>
                <el-menu-item index="/employee">
                    <i class="el-icon-user"></i>
                    <span slot="title">员工管理</span>
                </el-menu-item>
                <el-menu-item index="/check_record">
                    <i class="el-icon-document"></i>
                    <span slot="title">考勤管理</span>
                </el-menu-item>
                <el-menu-item index="/contract">
                    <i class="el-icon-wallet"></i>
                    <span slot="title">薪资管理</span>
                </el-menu-item>
                <el-menu-item index="/notice">
                    <i class="el-icon-wallet"></i>
                    <span slot="title">通知管理</span>
                </el-menu-item>
                <el-menu-item index="/setting">
                    <i class="el-icon-setting"></i>
                    <span slot="title">系统管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <el-container>
            <!-- 头部 -->
            <el-header class="main-header">
                <div class="float-left layout-center" style="height: 100%;display: flex">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ currentTitle }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <ul class="header-operations float-right">
                    <li class="layout-center" style="padding-right: 0">
                        <weather-widget/>
                    </li>
                    <li class="layout-center" style="padding-right: 25px;">
                        <div class="header-avatar" style="cursor: pointer">
                            <el-dropdown @command="onCommand">
                               <span>
                                    <strong style="margin-right: 5px">{{ employeeInfo.name }}</strong>
                                    <img :src="employeeInfo.headImage" class="main-avatar">
                               </span>
                                <el-dropdown-menu slot="dropdown" style="min-width: 120px">
                                    <el-dropdown-item command="setting">个人设置</el-dropdown-item>
                                    <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                                    <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </li>
                    <li class="current-time layout-center" style="padding-left: 25px;">
                        <div class="text-center" style="width: 165px;">{{ currentTime }}</div>
                    </li>
                </ul>
            </el-header>

            <el-main class="page-main">
                <!-- 内容部分-->
                <router-view/>
            </el-main>
        </el-container>
        <el-dialog
            title="提示"
            :visible.sync="updateForm.visible"
            width="500px">

            <el-form ref="updatePwdForm" :model="updateForm.model" :rules="updateForm.rules">
                <el-form-item label="原始密码" prop="origin">
                    <el-input type="password" v-model="updateForm.model.origin" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="updateForm.model.newPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="重复新密码" prop="newPassword2">
                    <el-input type="password" v-model="updateForm.model.newPassword2" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateForm.visible = false">取 消</el-button>
                <el-button type="primary" @click="updatePwd">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import dateFormat from "@/util/dateformat";
import WeatherWidget from "@/components/WeatherWidget";
import StringTool from "@/util/StringTool";
import {mapState} from 'vuex'
import api from "@/services/api";

export default {
    name: "AdminLayout",
    components: {WeatherWidget},
    data() {
        return {
            updateForm: {
                visible:false,
                model: {
                    origin: '',
                    newPassword: '',
                    newPassword2: '',
                },
                rules: {
                    origin: [
                        {required: true, message: '请填写原始密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请填写新密码', trigger: 'blur'}
                    ],
                    newPassword2: [
                        {required: true, message: '请再次填写新密码', trigger: 'blur'},
                        {
                            validator: (callback) => {
                                if(this.updateForm.model.newPassword == this.updateForm.model.newPassword2){
                                    callback()
                                }else{
                                    callback(new Error())
                                }
                            }, message: '请再次填写新密码', trigger: 'blur'
                        }
                    ]
                }
            },
            currentTitle: '',
            activeIndex: '',
            currentTime: dateFormat(),
            _timer: null
        }
    },
    computed:{
        ...mapState(['employeeInfo'])
    },
    watch: {
        $route: "updateActiveMenuIndex"
    },
    async mounted() {
        if(this.employeeInfo.id < 1){
            // 从后端获取用户信息
            const empInfo = await api.get('/emp/get-info');
            this.$store.commit('saveEmployeeInfo',empInfo);
        }


        this.updateActiveMenuIndex();
        this._timer = setInterval(() => {
            this.currentTime = dateFormat();
        }, 1000)
    },
    destroyed() {
        if (this._timer) {
            clearInterval(this._timer)
        }
    },
    methods: {
        ...StringTool,
        updatePwd(){
            this.$refs.updatePwdForm.validate(valid=>{
                if(!valid)return;
            })
        },
        onCommand(cmd) {
            switch (cmd) {
                case 'setting':
                    this.$router.push('/user/setting')
                    break;
                case 'updatePwd':
                    this.updateForm.visible = true
                    break;
                case 'logout':
                    this.$router.push('/login')
                    break;
            }
        },
        updateActiveMenuIndex() {
            const meta = this.$route.meta;
            if (meta && meta.title) {
                this.currentTitle = meta.title
                document.title = meta.title + ' - 人力资源管理系统'
            }
            this.activeIndex = this.$route.path;
        },
        logout() {
            // 跳转到登录
            this.$router.push('/login')
        }
    }
}
</script>

<style scoped lang="less">
@logo_size: 32px;
@head-height: 32px;
@nav_bg_color: #001529;
@nav_active_color: #1890FF;
/*scoped：标识样式只作用与本组件*/
.admin-layout-container {
    height: 100vh;
}

.page-main {
    font-size: 14px;
}

.main-nav-menu {
    background-color: @nav_bg_color;
}

.main-el-menu {
    background-color: transparent;
    border-right: none;

    .el-menu-item {
        color: rgba(255, 255, 255, 0.6);

        &:hover, &:focus {
            background-color: transparent;
            color: rgba(255, 255, 255, 1);
        }

        &.is-active {
            background-color: @nav_active_color;
            color: #fff;
        }
    }
}

.site-logo {
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        height: @logo_size;
        display: inline-block;
    }

    h1 {
        vertical-align: middle;
        display: inline-block;
        height: @logo_size;
        margin: 0 0 0 5px;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        line-height: @logo_size;
        vertical-align: middle;
        animation: pro-layout-title-hide .3s;
    }
}

.main-header {
    position: relative;
    width: 100%;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 2, 1, 0.1);
    background-color: #fff;
    padding-right: 0;
    z-index: 9;
}

.header-operations {
    display: flex;
    padding: 0;
    margin: 0;
    height: 100%;

    li {
        cursor: default;
        line-height: @head-height;
        padding: 0 20px;
    }

    .hover {
        cursor: pointer;

        &:hover {
            background: rgba(255, 255, 255, 0.1);
        }
    }

    .pointer {
        cursor: pointer;
    }
}

.current-time {
    color: #fff;
    background: @nav_active_color;
}

.header-avatar {
    color: #fff;
}

.main-avatar {
    border-radius: 50%;
    position: absolute;
    width: 36px;
    right: -38px;
    background: #fff;
    padding: 2px;
    top: -4px;
}
</style>
